<template>
	<div class="department">
		<pageContent :table-data="departmentList" :content-data-config="contentDataConfig" @clickEdit="clickEdit"></pageContent>
		<pageModel :modelConfig="modelDataConfig" ref="modelRef" :default-value="defaultValue" />
	</div>
</template>

<script lang="ts" setup>
import pageContent from "@/components/PageContent/pageContent.vue"
import { contentDataConfig } from "./config/contentDataConfig"
import { modelDataConfig } from "./config/modelDataConfig"
import pageModel from "@/components/pageModel/pageModel.vue"
import useModelMethods from "@/hooks/useModelMethods"
import useGlobeStore from "@/store/globe"

const globalStore = useGlobeStore()

interface IRow {
	formData: IRowItem[]
}

interface IRowItem {
	field: string
	label: string
	type: string
	placeholder: string
}

const { modelRef, defaultValue, handleEdit } = useModelMethods()
const departmentList = globalStore.getDepartment
console.log("departmentList", departmentList)

const clickEdit = (row: IRow) => {
	console.log("row", row)
	handleEdit(row)
}
</script>

<style lang="less" scoped></style>
